<template>
  <ContentWrap>
    <!--    顶部查询项-->
    <el-form :model="form" inline label-width="100px">
      <el-form-item :label="t('partner.name')">
        <el-input
          v-model="form.name"
          clearable
          :placeholder="'请输入' + t('partner.name')"
          style="width: 250px"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="initialize">查询</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!--    操作项-->
    <div class="flex flex-items-center my-5">
      <el-button type="primary" @click="handleAdd('add')">
        {{ t('action.add') }}
      </el-button>
    </div>
    <!-- 表格主体 -->
    <el-table
      :data="dataList"
      highlight-current-row
      stripe
      border
      v-loading="tableLoading"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column :label="t('partner.id')" prop="id" min-width="70" />
      <el-table-column
        :label="t('partner.name')"
        prop="name"
        :width="calculateColumnWidth(dataList, 'name', 2)"
        :show-overflow-tooltip="true"
      />
      <el-table-column :label="t('partner.link')" prop="link" :width="120">
        <template #default="{ row }">
          <div class="flex items-center justify-center">
            <el-button type="primary" link @click="handleCopyLink(row.link)"> 复制 </el-button>
            <el-button type="primary" link @click="handleOpenLink(row.link)"> 跳转 </el-button>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        :label="t('partner.sort')"
        prop="sort"
        :width="calculateColumnWidth(dataList, 'sort')"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('partner.image')"
        prop="image_url"
        :width="calculateColumnWidth(dataList, 'image')"
      >
        <template #default="{ row }">
          <div class="flex items-center justify-center">
            <el-button type="primary" link @click="handlePreviewImage(row.image_url)">
              预览
            </el-button>
          </div>
          <FileList :files="row.image_list || []" />
        </template>
      </el-table-column>

      <el-table-column
        :label="t('partner.description')"
        prop="description"
        min-width="200"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        :label="t('common.creator')"
        prop="creator"
        min-width="120"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        :label="t('common.create_time')"
        prop="create_time"
        :width="calculateColumnWidth(dataList, 'create_time')"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('common.updater')"
        prop="updater"
        min-width="120"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        :label="t('common.update_time')"
        prop="update_time"
        :width="calculateColumnWidth(dataList, 'update_time')"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="{ row }">
          <el-button @click="handleJump('edit', row)" size="small">
            {{ t('order.edit') }}
          </el-button>

          <el-button type="success" @click="handleJump('detail', row)" size="small">
            详情
          </el-button>

          <el-button type="danger" @click="handleDelete(row.id)" size="small"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <Pagination
      :total="paginationTotal"
      v-model:page="form.pageIndex"
      v-model:limit="form.pageSize"
      @pagination="initialize"
    />
  </ContentWrap>
</template>

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { ContentWrap } from '@/components/ContentWrap'
import { calculateColumnWidth } from '@/utils'
import { getListApi, deleteDataApi } from '@/api/partner'
import { createImageViewer } from '@/components/ImageViewer'

const { t } = useI18n()
const { push } = useRouter()

const tableLoading = ref<boolean>(false)
const dataList = ref<any[]>([])
const paginationTotal = ref<number>(0)

const form = ref<Record<string, any>>({
  name: '',
  pageIndex: 1,
  pageSize: 30
})

//点击跳转到新增
const handleAdd = (type: string) => {
  push(`/oaperations/partner/${type}`)
}

//跳转
const handleJump = (type: string, row: Record<string, any>) => {
  const path = ref<string>('') // 默认值为空字符串
  path.value = `/oaperations/partner/${type}`
  push({ path: path.value, query: { id: row.id } })
}

//获取枚举
const getDropDownBoxInfo = async () => {}

//初始化请求
const initialize = async () => {
  tableLoading.value = true
  const params = JSON.parse(JSON.stringify(form.value))
  delete params.date
  if (params.order_no && !params.order_type) {
    ElMessage.error('请选择' + t('partner.order_type'))
    tableLoading.value = false
    return
  }
  const resp = await getListApi(params)
  dataList.value = resp.data.list

  paginationTotal.value = resp.data.total
  tableLoading.value = false
}

// 复制链接
const handleCopyLink = (link: string) => {
  navigator.clipboard
    .writeText(link)
    .then(() => {
      ElMessage.success('复制成功')
    })
    .catch(() => {
      ElMessage.error('复制失败')
    })
}

// 跳转链接
const handleOpenLink = (link: string) => {
  window.open(link, '_blank')
}

const handlePreviewImage = (url: string) => {
  if (!url) return
  createImageViewer({
    urlList: [url],
    zIndex: 99999
  })
}

//删除
const handleDelete = (id: string) => {
  ElMessageBox.confirm('确定删除该数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const resp = await deleteDataApi(id)
    if (resp.code === 0) {
      ElMessage.success('删除成功')
      initialize()
    }
  })
}

//重置查询项
const reset = () => {
  form.value = {
    name: '',
    pageIndex: 1,
    pageSize: 30
  }
  paginationTotal.value = 0
  initialize()
}

onMounted(() => {
  getDropDownBoxInfo()
  initialize()
})
</script>

<style lang="less" scoped></style>
